<template>
  <div id="echartsCenterBottom" class="drugdemand-echarts"></div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'itemCenter1',
    components: {},
    data() {
      return {
        echartsCenterBottom: null
      }
    },
    mounted() {
      this.setOptions()
    },
    methods: {
      setOptions() {
        // 获取图例数据
        let colorList = ['#EAB206', '#00F3F5', '#3B9CF5', '#3B9CF5', '#3B9CF5', '#3B9CF5', '#3B9CF5', '#3B9CF5', '#3B9CF5', '#3B9CF5', '#3B9CF5', '#3B9CF5']
        let colorListA = ['#083852', '#083852', '#083852', '#083852', '#083852', '#083852', '#083852', '#083852', '#083852', '#083852', '#083852', '#083852']
        const data = {
          label: ['某某某行业1', '某某某行业2', '某某某行业3', '某某某行业4', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'Q', 'W'],
          value: [90, 22, 33, 44, 55, 66, 77, 88, 99, 21, 32, 43, 120, 88, 16, 28, 39, 49, 69, 10, 29]
        }
        let dataZoomMove = {
          start: 0,
          end: 5
        }
        let dataZoomMoveTimer = null
        var option = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(7,62,97, .7)",
            textStyle: {
              color: "#fff",
            },
            borderColor: "#159AFF",
            axisPointer: {
              lineStyle: {
                color: "transparent",
              },
            },
          },
          dataZoom: [
            {
              show: false, // 为true 滚动条出现
              startValue: dataZoomMove.start,
              endValue: dataZoomMove.end,
              yAxisIndex: [0, 1], //关联多个y轴
            },
            {
              //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
              type: "inside",
              yAxisIndex: 0,
              zoomOnMouseWheel: false, //滚轮是否触发缩放
              moveOnMouseMove: true, //鼠标滚轮触发滚动
              moveOnMouseWheel: true,
            },
          ],
          grid: {
            containLabel: true,
            bottom: 0,
            left: 170,
            top: 10,
            right: 100,
          },
          xAxis: {
            type: "value",
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: [
            {
              type: "category",
              data: data.label,
              inverse: true,
              axisLabel: {
                inside: true,
                margin: 2, //刻度标签与轴线之间的距离
                formatter: function (value) {
                  let k = data.label.indexOf(value);
                  let index = k < 9 ? (k + 1) : k + 1;
                  if (k === 0 && k < 3) {
                    return `{idx|TOP${index}} {a|${value}}`
                  } else {
                    return `{b|TOP${index}} {a|${value}}`;
                  }

                },
                rich: {
                  idx: {
                    color: "#F3B803",
                    padding: [-1, 10, 0, -176],
                    align: "center",
                    fontSize: 14,
                  },
                  b: {
                    padding: [-1, 10, 0, -158],
                    color: "#769EBF",
                    fontSize: 14,
                  },
                  a: {
                    fontSize: 14,
                    color: "#769EBF",
                    padding: [-3, 0, 0, 8],
                  },
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },

            {
              type: "category",
              data: data.label,
              inverse: true,
              axisLabel: {
                inside: true,// 数值和图表分离
                padding: [0, -90, 0, 0],
                formatter: function (value) {
                  let k = data.label.indexOf(value);
                  let index = k;
                  return `{title|${(data.value[index] / 100).toFixed(2)}%}`;
                },
                rich: {
                  a: {
                    color: "#769EBF",
                    fontSize: 16,
                    align: "left",
                    width: 28,
                  },
                  title: {
                    align: "right",
                    color: "#fff",
                    fontSize: 16,
                    padding: [0, -0, 0, 25],
                  },
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              data: data.value,
              type: "bar",
              barWidth: 7, // 柱子宽度
              MaxSize: 0,
              showBackground: true,
              barBorderRadius: [30, 0, 0, 30],
              backgroundStyle: {
                color: 'rgba(7,62,97, .7)',
              },
              label: {
                show: false,
                offset: [20, -17],
                color: '#fff',
                fontWeight: 500,
                position: 'left',
                align: 'left',
                fontSize: 14,
                formatter: function (params) {
                  console.log(params)
                  return params.data.name;
                }
              },
              itemStyle: {
                barBorderRadius: [3, 0, 0, 3],
                color: params => {
                  let i = colorListA.length;
                  let f = colorList.length;
                  return {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: colorListA[params.dataIndex % i]
                      },
                      {
                        offset: 1,
                        color: colorList[params.dataIndex % f]
                      },
                    ],
                  }
                }
              }
            },
            {
              name: "外圆",
              type: "scatter",
              emphasis: {
                scale: false,
              },
              tooltip: {
                show: false
              },
            },
          ],
        };

        this.echartsCenterBottom = echarts.init(
          document.getElementById("echartsCenterBottom")
        );
        window.addEventListener("resize", () => {
          this.echartsCenterBottom.resize();
        });
        this.echartsCenterBottom.setOption(option);
        const startMoveDataZoom = () => {
          dataZoomMoveTimer = setInterval(() => {
            dataZoomMove.start += 1;
            dataZoomMove.end += 1;
            if (dataZoomMove.end > data.value.length - 1) {
              dataZoomMove.start = 0;
              dataZoomMove.end = 5
            }
            this.echartsCenterBottom.setOption({
              dataZoom: [
                {
                  type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                  startValue: dataZoomMove.start,
                  endValue: dataZoomMove.end,
                },
              ],
            });
          }, 2500);
        };
        startMoveDataZoom()
        let chartDom = this.echartsCenterBottom .getDom();
        chartDom.addEventListener('mouseout', () => {
          if (dataZoomMoveTimer) return;
          let dataZoomMove_get = this.echartsCenterBottom .getOption().dataZoom[0];
          dataZoomMove.start = dataZoomMove_get.startValue;
          dataZoomMove.end = dataZoomMove_get.endValue;
          startMoveDataZoom();
        })
        chartDom.addEventListener('mouseover', () => {
          clearInterval(dataZoomMoveTimer);
          dataZoomMoveTimer = undefined;
        })

      }
    }
  }
</script>

<style scoped>
.drugdemand-echarts {
  width: 100%; height: 180px;margin: 0 auto;
}
</style>
